$(function () {
  // 页面一加载，就渲染数据
  loadPage()

  // 1、用户输入内容后，判断是否按下 enter 键（enter 的键码是 13）
  $('#title').on('keydown', function (e) {
    if (e.keyCode === 13) {
      if ($(this).val().trim() === '') {
        alert('请输入内容')
      } else {
        // 1、获取本地存储的数据
        var local = getData()

        // 2、把用户输入的内容更新到 local 数组
        local.push({ title: $(this).val().trim(), done: false })

        // 3、更新本地存储的数据
        updateData(local)

        // 4、加载页面数据
        loadPage()

        $(this).val('') // 清空文本框
      }
    }
  })

  // 2、删除操作
  $('ol, ul').on('click', 'img', function () {
    // 1、获取本地存储的数据
    var local = getData()

    // 2、修改数据
    // 这里采用自定义属性的方式，获取索引号
    var index = $(this).attr('data-index')
    local.splice(index, 1)

    // 3、更新本地存储的数据
    updateData(local)

    // 4、加载页面数据
    loadPage()
  })

  // 3、复选框进行勾选操作
  $('ol, ul').on('click', 'input', function () {
    // 1、获取本地存储的数据
    var local = getData()

    // 2、修改数据
    // 这里采用获取 兄弟元素的索引号 的方式
    var index = $(this).siblings('img').attr('data-index')
    local[index].done = $(this).prop('checked')

    // 3、更新本地存储的数据
    updateData(local)

    // 4、加载页面数据
    loadPage()
  })

  // 获取本地存储的数据
  function getData() {
    var data = localStorage.getItem('todoList')
    if (data !== null) {
      return JSON.parse(data)
    } else {
      return []
    }
  }

  // 更新本地存储的数据
  function updateData(arr) {
    localStorage.setItem('todoList', JSON.stringify(arr))
  }

  // 加载页面
  function loadPage() {
    var local = getData()
    // 遍历数组之前清空 ol、ul 的元素内容，保证追加的是最新的数据
    $('ol').empty()
    $('ul').empty()
    var todoCount = 0 // 正在进行个数
    var doneCount = 0 // 已经完成个数
    // 遍历数组
    $.each(local, function (index, item) {
      if (item.done) {
        $('ul').prepend(`
          <li>
            <input type="checkbox" checked />
            <span>${item.title}</span>
            <img src="img/remove.png" alt="" data-index=${index} />
          </li>
        `)
        doneCount++
      } else {
        $('ol').prepend(`
          <li>
            <input type="checkbox" />
            <span>${item.title}</span>
            <img src="img/remove.png" alt="" data-index=${index} />
          </li>
        `)
        todoCount++
      }
    })
    $('#todoCount').text(todoCount)
    $('#doneCount').text(doneCount)
  }
})
